<template>
  <div class="login-container">
    <div class="special">
      <div class="snow" v-for="i in 200"></div>
    </div>
    <div class="login-form">
      <h1 class="login-title">
        智慧
        <span style="color: red"> 云</span>
        社区
      </h1>
      <div class="input-container">
        <input
          type="username"
          class="input"
          clearable
          placeholder="请输入用户名"
          :style="{ background: 'transparent' }"
          :autocomplete="false"
          v-model="loginForm.User"
        />
        <input
          type="password"
          class="input"
          placeholder="请输入密码"
          :style="{ background: 'transparent' }"
          :autocomplete="false"
          v-model="loginForm.Password"
        />
      </div>
      <el-button class="login-button" @click="options.valid=true"> 登陆</el-button>
    </div>
    <vcode :show="options.valid" @success="handleLogin"/>
    <particles-bg type="lines" :bg="true"/>
  </div>
</template>
<script>
import { ParticlesBg } from 'particles-bg-vue';
import Vcode from 'vue-puzzle-vcode';

export default {
  name: 'Login',
  components: {
    Vcode,
    ParticlesBg
  },
  data() {
    return {
      loginForm: {
        User: 'test',
        Password: '62d18522b74d75b2a84776c91ba5498377441d4c4af0cea22ca7de9e09475d3a',
        Expired: 6000
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined,
      options: {
        valid: false
      }
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    async handleLogin() {
      this.loading = true;
      const params = this.loginForm;
      const res = await this.$store.dispatch('user/login', params);
      if (res) {
        this.options.valid = false;
        // auto join chat room

        this.$router.push({ path: this.redirect || '/' });
        // auto get power list
        await this.$store.dispatch('user/setNode');
        this.$router.push({ path: this.redirect || '/' });
        // this.loading = false
      } else {
        // this.loading = false
        return this.$message.warning(' 账户名或密码错误');
      }

    }

  }

};
</script>
<style lang="scss" scoped>
body {
  overflow: hidden;
  height: 100vh;

}

.login-container {
  height: 100vh;
  background-size: cover;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  @function random_range($min, $max) {
    $rand: random();
    $random_range: $min + floor($rand * (($max - $min) + 1));
    @return $random_range;
  }

  .special {
    transform: translateY(-20vh);

    .snow {
      $total: 100;
      position: absolute;
      width: 10px;
      height: 10px;
      background: #fffae6;
      border-radius: 50%;
      @for $i from 1 through $total {
        $random-x: random(1000000) * 0.0001vw;
        $random-offset: random_range(-100000, 100000) * 0.0001vw;
        $random-x-end: $random-x + $random-offset;
        $random-x-end-yoyo: $random-x + ($random-offset / 2);
        $random-yoyo-time: random_range(30000, 80000) / 100000;
        $random-yoyo-y: $random-yoyo-time * 100vh;
        $random-scale: random(10000) * 0.0001;
        $fall-duration: random_range(10, 30) * 1s;
        $fall-delay: random(30) * -1s;
        &:nth-child(#{$i}) {
          opacity: random(10000) * 0.0001;
          transform: translate($random-x, -10px) scale($random-scale);
          animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
        }
        @keyframes fall-#{$i} {
          #{percentage($random-yoyo-time)} {
            transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
          }
          to {
            transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
          }
        }
      }
    }
  }

  .login-form {
    height: 400px;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url("../../assets/images/loginBar.png") no-repeat;
    background-size: contain;
    padding: 1em;

    .login-title {
      user-select: none;
      cursor: pointer;
      transition: all .8s;
      color: #fef8de;

      &:hover {
        text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
      }
    }

    .input-container {
      width: 90%;

      .input {
        outline: none;
        border: none;
        display: block;
        color: #fef8de;
        background: transparent;
        border-bottom: solid #d9d9d9 2px;
        width: 80%;
        margin: 10px auto;
        height: 4em;
        transition: all 1s;

        &:focus {
          border-bottom: solid #1515f9 2px;
        }
      }

    }

    .login-button {
      margin-top: 1em;
      background: transparent;
      color: whitesmoke;
      border-radius: 2em;
      width: 10em;
    }
  }
}


</style>
